<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { Bell, RefreshRight } from '@element-plus/icons-vue'
import { getSystemNotice } from '../../../api/system/notice'
import { standardDateTime } from '../../../Tools/Time/date'
import { TSystemNotice } from '../../../Types/system'

// 初始化
const noticeList = ref<TSystemNotice[]>()
const loading = ref(false)
// 公告数据
// const noticeList = ref<NoticeItem[]>([
// 	{
// 		id: 1,
// 		title: '系统维护通知',
// 		content: '系统将于2024年4月1日进行例行维护，维护时间为凌晨2:00-4:00',
// 		type: 'notice',
// 		date: '2024-03-30',
// 		isImportant: true
// 	},
// 	{
// 		id: 2,
// 		title: 'V1.2.0版本更新',
// 		content: '新增数据导出功能；优化用户界面；修复已知bug',
// 		type: 'version',
// 		date: '2024-03-25',
// 		isImportant: false
// 	},
// 	{
// 		id: 3,
// 		title: '数据安全提醒',
// 		content: '请各位用户及时修改密码，建议使用强密码组合，包含大小写字母、数字和特殊字符',
// 		type: 'notice',
// 		date: '2024-03-20',
// 		isImportant: true
// 	},
// 	{
// 		id: 4,
// 		title: 'V1.1.5版本更新',
// 		content: '优化数据加载速度；新增数据分析图表；修复部分用户反馈的问题',
// 		type: 'version',
// 		date: '2024-03-15',
// 		isImportant: false
// 	},
// 	{
// 		id: 5,
// 		title: '节假日系统运行公告',
// 		content: '清明节期间系统将照常运行，技术支持时间调整为9:00-18:00',
// 		type: 'notice',
// 		date: '2024-03-10',
// 		isImportant: false
// 	}
// ])

// 当前选中的公告类型
const activeType = ref<'notice' | 'version'>('notice')
// 筛选公告（系统公告、版本更新）
const filteredNotices = computed(() => {
	return noticeList.value
		?.filter((item) => item.type === activeType.value && item.status === true)
		?.sort((a, b) => new Date(b.createTime).getTime() - new Date(a.createTime).getTime())
		?.map((item) => ({
			...item,
			createTime: standardDateTime(item.createTime),
			updateTime: standardDateTime(item.updateTime)
		}))
})

// 获取公告列表
onMounted(async () => {
	loading.value = true
	const res = await getSystemNotice()
	// console.log(res)
	noticeList.value = res.data.data
	loading.value = false
})
</script>

<template>
	<div class="notice-container">
		<!-- 左侧分类菜单 -->
		<div class="left">
			<el-menu :default-active="activeType" class="notice-menu">
				<!-- 系统公告菜单项 -->
				<el-menu-item index="notice" @click="activeType = 'notice'">
					<el-icon><Bell /></el-icon>
					<span>系统公告</span>
				</el-menu-item>
				<!-- 版本更新菜单项 -->
				<el-menu-item index="version" @click="activeType = 'version'">
					<el-icon><RefreshRight /></el-icon>
					<span>版本更新</span>
				</el-menu-item>
			</el-menu>
		</div>

		<!-- 右侧公告列表 -->
		<div class="right" v-loading="loading">
			<el-timeline>
				<!-- 遍历筛选后的公告列表 -->
				<el-timeline-item
					v-for="item in filteredNotices"
					:key="item.id"
					:timestamp="item.createTime"
					placement="top"
					:type="item.important == '重要' ? 'danger' : 'primary'"
				>
					<!-- 公告卡片 -->
					<el-card>
						<template #header>
							<div class="notice-header">
								<div class="left-header">
									<el-tag
										:type="item.important == '重要' ? 'danger' : 'success'"
										size="small"
										class="type-tag"
									>
										{{ item.type === 'notice' ? '公告' : `${item.version}` }}
									</el-tag>
									<span class="title">{{ item.title }}</span>
								</div>
								<div class="update-info" v-if="item.updateTime ? true : false">
									<span class="label">修改时间：</span>
									<span class="time">{{ standardDateTime(item.updateTime) }}</span>
								</div>
							</div>
						</template>
						<!-- 公告内容 -->
						<div class="notice-body">
							{{ item.content }}
						</div>
					</el-card>
				</el-timeline-item>
			</el-timeline>
		</div>
	</div>
</template>

<style lang="scss" scoped>
/* 公告容器：使用 flex 布局，设置基本属性 */
.notice-container {
	display: flex;
	height: 100%; /* 高度填充父容器 */
	gap: 20px; /* 左右两侧间距 */
	position: relative;
	overflow: hidden; /* 防止容器本身出现滚动条 */

	/* 左侧菜单区域 */
	.left {
		position: sticky; /* 固定定位，使菜单保持在视图中 */
		top: 0;
		width: 200px; /* 固定宽度 */
		height: 100%;
		border-right: 1px solid var(--el-border-color); /* 右侧分隔线 */
		background-color: white; /* 确保遮盖滚动内容 */
		z-index: 1; /* 保证菜单在内容上层 */

		/* 移除 el-menu 默认的右边框 */
		.notice-menu {
			border-right: none;
		}
	}

	/* 右侧内容区域 */
	.right {
		flex: 1; /* 占据剩余空间 */
		padding-left: 20px;
		overflow-y: auto; /* 启用垂直滚动 */

		/* 自定义滚动条样式 */
		&::-webkit-scrollbar {
			width: 6px; /* 滚动条宽度 */
		}

		&::-webkit-scrollbar-thumb {
			background-color: #dcdfe6; /* 滚动条滑块颜色 */
			border-radius: 3px; /* 滑块圆角 */
		}

		&::-webkit-scrollbar-track {
			background-color: #f5f7fa; /* 滚动条轨道颜色 */
		}

		/* 时间线内边距 */
		.el-timeline {
			padding: 20px;
		}

		/* 公告标题栏样式 */
		.notice-header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left-header {
				display: flex;
				align-items: center;

				.type-tag {
					margin-right: 10px;
					font-size: 11px;
				}

				.title {
					font-weight: 500;
					font-size: 14px;
					color: var(--el-text-color-primary);
				}
			}

			.update-info {
				.label {
					color: #909399;
					font-size: 12px;
					margin-right: 4px;
				}

				.time {
					color: #909399;
					font-size: 12px;
				}
			}
		}

		/* 公告内容样式 */
		.notice-body {
			line-height: 1.6; /* 行高 */
			color: var(--el-text-color-regular); /* 使用 Element Plus 的文本颜色变量 */
		}
	}
}
</style>
